<template>
    <div class="login-container">
        <!-- 顶部工具栏 -->
        <div class="top-bar">
        <el-switch
            v-model="isDark"
            inline-prompt
            active-icon="Moon"
            inactive-icon="Sunny"
            @change="toggleTheme"
        />
        <lang-select class="ml-2 cursor-pointer" />
        </div>
        <el-card class="login-card">
          <div class="text-center relative">
            <h2>后台管理</h2>
            <el-tag class="ml-2 absolute-rt">1.0.0</el-tag>
          </div>
          <el-form
            ref="loginFormRef"
            :model="loginData"
            :rules="loginRules"
            class="login-form"
          >
            <!-- 用户名 -->
            <el-form-item prop="account">
              <div class="input-wrapper">
                <el-icon class="mx-2"><User /></el-icon>
                <el-input
                  ref="account"
                  v-model="loginData.account"
                  :placeholder="$t('login.username')"
                  name="account"
                  size="large"
                  class="h-[48px]"
                />
              </div>
            </el-form-item>
            <!-- 密码 -->
            <el-tooltip
              :visible="isCapslock"
              :content="$t('login.capsLock')"
              placement="right"
            >
              <el-form-item prop="pwd">
                <div class="input-wrapper">
                  <el-icon class="mx-2"><Lock /></el-icon>
                  <el-input
                    v-model="loginData.pwd"
                    :placeholder="$t('login.password')"
                    type="password"
                    name="pwd"
                    @keyup="checkCapslock"
                    @keyup.enter="handleLoginSubmit"
                    size="large"
                    class="h-[48px] pr-2"
                    show-password
                  />
                </div>
              </el-form-item>
            </el-tooltip>
            <!-- 登录按钮 -->
            <el-button
              :loading="loading"
              type="primary"
              size="large"
              class="w-full"
              @click.prevent="handleLoginSubmit"
              >{{ $t("login.login") }}
            </el-button>
          </el-form>
        </el-card>

        <!-- ICP备案 -->
        <div class="icp-info" v-show="icpVisible">
        <p>
            Copyright © 2021 - 2024 youlai.tech All Rights Reserved. 有来技术
            版权所有
        </p>
        <p>皖ICP备20006496号-3</p>
        </div>
    </div>
</template>
<script setup>
import { accountLogin } from '@/api/auth';
// 导入 login.scss 文件
import "@/styles/login.scss";
import LangSelect from '@/components/LangSelect/index.vue';
import { ref,computed } from 'vue';
import { useI18n } from "vue-i18n";
import { useUserStore,useMenuStore } from '@/store';
const userStore = useUserStore();
const menuStore = useMenuStore();

// 国际化 Internationalization
const { t } = useI18n();
const isDark = ref('light');
// 按钮 loading 状态
const loading = ref(false);

// 是否大写锁定
const isCapslock = ref(false);
/** 检查输入大小写 */
function checkCapslock(event) {
  // 防止浏览器密码自动填充时报错
  if (event instanceof KeyboardEvent) {
    isCapslock.value = event.getModifierState("CapsLock");
  }
}
/** 主题切换 */
const toggleTheme = () => {
  
};
// 登录表单ref
const loginFormRef = ref();

const loginData = ref({
  account: "15829337275",
  /*admin123*/ 
  pwd: "123456",
  captchaKey:'',
});

// 是否显示 ICP 备案信息
const icpVisible = ref(true);

const loginRules = computed(() => {
  return {
    account: [
      {
        required: true,
        trigger: "blur",
        message: t("login.message.username.required"),
      },
    ],
    pwd: [
      {
        required: true,
        trigger: "blur",
        message: t("login.message.password.required"),
      },
      {
        min: 6,
        message: t("login.message.password.min"),
        trigger: "blur",
      },
    ],
  };
});
/** 登录表单提交 */
const handleLoginSubmit = () => {
  loginFormRef.value.validate((valid)=>{
    if(valid){
      loading.value = true;
      accountLogin(loginData.value).then((res)=>{
        // 用户登录信息
        userStore.setAccessToken(res.token);
        // 用户菜单
        menuStore.setMenus(res.menus);
      })
      .finally(() => {
        loading.value = false;
      });
    }
  });
}
</script>
<style scoped>
</style>